<template>
    <!--总内容-->
    <div class='app-container home'>
        <!--数据总览-->
        <p class='title'>数据总览</p>
        <ul>
            <li>
                <div>咨询数</div>
                <div><span>{{ date.number }}</span><span>今日</span></div>
                <div>共{{ date.total }}</div>
            </li>
            <li>
                <div>访问人数</div>
                <div><span>{{ date.visit }}</span><span>今日</span></div>
                <div>共{{ date.totalVisit }}</div>
            </li>
            <li>
                <div>咨询时长(分钟)</div>
                <div><span>{{ date.duration }}</span><span>今日</span></div>
                <div>共{{ date.totalDuration }}</div>
            </li>

        </ul>
        <!--        咨询人数/男女比例-->
        <div class='data-container'>
            <!--            咨询人数-->
            <div class='ask'>
                <div class='data-title'>
                    <p>咨询人数</p>

                    <!--选择日期组件-->
                    <!--            <div class='demo-date-picker'>-->
                    <div class='block'>
                        <el-date-picker
                            v-model='value'
                            type='daterange'
                            start-placeholder='2024-01-31'
                            end-placeholder='2024-03-01'
                            :default-time:any='defaultTime'
                        />
                    </div>
                </div>
                <div class='ColumnBox'>
                    <div id='Column'></div>
                </div>
            </div>
            <!--男女比例-->
            <div class='bili'>
                <div class='data-title'>
                    <p>男女比例</p>

                    <!--选择日期组件-->
                    <!--            <div class='demo-date-picker'>-->
                    <div class='block'>
                        <el-date-picker

                            v-model='value'
                            type='daterange'
                            start-placeholder='2024-01-31'
                            end-placeholder='2024-03-01'
                            :default-time:any='defaultTime'
                        />
                    </div>
                </div>
                <div class='pieBox'>
                    <div id='pie'></div>
                    <div id='Pie'></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup name='Index' lang='ts'>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { getDataAll, getPie } from '@/views/APIget/home/getHome';

// import query from '@/views/class/query.vue';
// 数据总览
const date = ref({});
getDataAll().then(res => {
    date.value = res.data;
});

//饼图


//选择日期组件
const value = ref('');
const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)
]);
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    let myPie = echarts.init(document.getElementById('pie') as HTMLElement);
    let MyPie = echarts.init(document.getElementById('Pie') as HTMLElement);
    let MyColumn = echarts.init(document.getElementById('Column') as HTMLElement);
    // 数据图
    // const dataCount = 5e5;
    // const data = generateData(dataCount);
    MyColumn.setOption({
        // legend: {},
        tooltip: {},

        color: ['#68BBC4', '#5087EC'],
        dataset: {
            source: [
                ['product', '2015', '2016', '2017'],
                ['学院名称1', 43.3, 85.8, 93.7],
                ['学院名称2', 83.1, 73.4, 55.1],
                ['学院名称3', 86.4, 65.2, 82.5],
                ['学院名称4', 72.4, 53.9, 39.1],
                ['学院名称5', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar', barGap: '0', barWidth: '30%' }, { type: 'bar', barWidth: '30%' }]
    });

    getPie().then(res => {
        Mypie(res.data);
    });

    function Mypie(data: any) {
        // 男女饼图
        myPie.setOption({

            tooltip: {
                trigger: 'item'
            },

            color: ['#68BBC4', '#5087EC'],
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: data.woman, name: '男' },
                        { value: data.man, name: '女' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        // 学历饼图
        MyPie.setOption({

            tooltip: {
                trigger: 'item'
            },

            color: ['#68BBC4', '#5087EC'],
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: data.master, name: '本科生' },
                        { value: data.bachelor, name: '研究生' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    }
});


</script>

<style scoped lang='scss'>
#College, #Degree {
    width: 140px;
}


.pieBox {
    display: flex;
}

.ColumnBox {

}

#Column {
    width: 600px;
    height: 400px;
}

#pie {
    width: 400px;
    height: 400px;
}

#Pie {
    width: 400px;
    height: 400px;
}

.el-date-editor {
    width: 250px;
    height: 30px;
}

.data-title {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    justify-content: space-between;
}

.ask, .bili {
    width: 45%;
    margin-right: 50px;
}

//总容器
.app-container {
    padding: 25px;

}

//数据总览
.title {
    font-size: 18px;
    font-weight: 600;
    //margin-bottom: 40px;
}

ul {
    display: flex;
    margin-top: 40px;
}

li {
    width: 260px;
    list-style: none;
    padding: 15px 20px 10px;
    border: 1px solid #bbb;
    margin-right: 50px;
    font-size: 15px;

    div:nth-of-type(1) {
    }

    div:nth-of-type(2) {
        padding: 15px 50px;

        span:nth-of-type(1) {
            font-size: 30px;
        }
    }
}

//咨询人数/男女比例
.data-container {
    display: flex;
    margin-top: 80px;
    //display: flex;
    //justify-content: space-between;
}

//选择日期
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}
</style>


